<template name="carousel">
  <div class="carousel">
    <el-carousel
      height="629px"
      direction="vertical"
      trigger="click"
      class="active"
    >
      <el-carousel-item v-for="item in carouselList" :key="item.id">
        <ul class="viewBg" :style="`background-image : url(${item.img}) `">
          <li class="viewContent">
            <div class="head">
              <p>
                <span style="font-size:30px;">{{item.day}}</span>
                {{item.year}}
              </p>
              <h2 style="padding-top:5px;">{{item.title}}</h2>
            </div>
            <div class="foot">
              <indexSearch></indexSearch>
              <p style="font-size: 13px;padding-top: 5px;">
                图片来自于
                <a href="javascript:;">{{item.zip}}</a>,此目的地共收藏了
                <a href="javascript:;">{{item.num}}</a>张
                <a href="javascript:;">{{item.zip}}</a>图片。本片由
                <a href="javascript:;">{{item.from}}</a>荣誉出品！
              </p>
            </div>
          </li>
        </ul>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script>
import {mapState} from 'vuex'
import indexSearch from "./indexSearch";
export default {
  name: "carousel",
  components: {
    indexSearch
  },
  data() {
    return {
    };
  },
  computed:{
    ...mapState(['carouselList'])
  },
  methods: {
    carousel() {
      this.$store.dispatch('reqCarouselList')
    },
  },
  watch:{
     carouselList(){
      this.$nextTick(function() {
        let buttonArr = document.getElementsByClassName("el-carousel__button");   
        let long = this.carouselList.length - 1;
        let i = 0;
        for (i; i <= long; i++) {
          buttonArr[i].style.backgroundImage = `url(${this.carouselList[i].img})`;
        }
      });
    }
  },
  mounted() {
    this.carousel();
  }
};
</script>

<style lang="stylus" scoped>
.carousel {
  .active >>> .is-active {
    .el-carousel__button {
      border: 2px solid orange;
    }
  }
  .active >>> .el-carousel__button {
  width: 110px !important;
  height: 60px !important;
  margin-right: 30px;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  opacity: 1;
}

  .viewBg {
    background-size: 100% 100%;
    height: 100%;
    width: 100%;
    background-repeat: no-repeat;

    .viewContent {
      width: 1000px;
      margin: auto;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      color: #f6f6f6;

      .head {
        margin-top: 27px;
      }

      .foot {
        margin: 0 auto 23px;

        p {
          a {
            color: orange;
          }
        }
      }
    }
  }
}
</style>
<style>

</style>